理解vue的渲染watch、compute
这篇文章将带大家全面理解vue的渲染watcher、computed和user watcher，其实computed和user watcher都是基于Watcher来实现的，我们通过一个一个功能点去敲代码，让大家全面理解其中的实现原理和核心思想。所以这篇文章将实现以下这些功能点：实现数据响应式基于渲染wather实现首次数据渲染到界面上数据依赖...
2024-01-10
vue怎么写put请求
我是这样写的报错如图求助回答这得看你$http是啥库啊, 比如axios: /** * 重考 * * @param examPaperId * @param studentNo */ examAgain({ examPaperId, studentNo }) { return axios.put('/examInfo/examAgain', { examPaperId, ...
2024-01-10
谷歌Compute Engine的调整大小的启动盘
我只是谷歌计算引擎的文件，在阅读： < < 注：计算引擎正在与相应的操作系统社区和厂商最终将所有的操作系统自动调整根分区。因此，我们建议您偶尔检查以确保操作系统仍然需要执行此步骤，并且随着时间的推移，此步骤将在所有操作系统中完全删除。 >>谷歌Compute Engine的调整大小的启动盘...
2024-01-10
VUE----watch和compute
1.computed:计算属性computed是一个对象，而里面需要计算的属性是一个函数的返回值。计算属性默认只有getter，可以在需要的时候自己设定setter。在data中没有直接声明出要计算的变量，也可以直接在computed中写入。computed适用场景2.computed与methods区别：计算属性是基于它们的响应式依赖进行缓存的。只在...
2024-01-10
vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由如上图，我想根据用户权限不同，动态添加删除菜单下面是路由配置const routes = [ { path: '/', component: Home, name: '系统管理', iconCls: 'el-icon-setting', children: [ { path: '/Page12', component: Page12, name: '组织机构' }, { path: '/...
2024-01-10
vue静态路由vue-router怎么使用
静态路由vue-router使用路由可以方便我们访问多个组件，后面也会使用到路由跳转中安装:npm install vue --save-devnpm install vue-router --save-dev引入模块router在App.vue里面加写入 <router-view></router-view>在命令提示行输入 “npm run dev” 执行项目在浏览器输入域名地址 “域名地址+路由地址” 如： http://localhost:...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
2024-01-10
vue-computed计算属性
计算属性：用来封装你想对一个属性进行的操作computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改...
2024-01-10
请问使用vue-router与v-show分别实现选项卡有什么区别？
我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：1、管理后台：2、选项卡：3、移动端底部tabber:问题如下：1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-sh...
2024-03-14vue升级之路之vue-router的使用教程
使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选...
2024-01-10
基于vue-cli构建vue-router的入门级demo
本案列仅针对刚刚入门vue学习的伙伴，博主也是刚刚在学基于vue-cli搭建脚手架项目，对于前端大牛，可以移步。快速搭建vue-cli环境如何搭建基于vue-cli项目，这里不再叙述，如果不会的伙伴可以自己百度。项目搭建完成后，基本文件目录如下：打开我们刚刚创建的my-project文件夹，这里对文件夹下的...
2024-01-10
vue项目中router路由配置
介绍路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》安装本地环境安装路由插件vue-router： cnpm install vue-router --save-dev 配置两种配置方法：在main.js中 || 在src/router文件夹下的index.js中这里只说在src/router/index.js中引入：import Vue from 'vue'import Router from 'vue-rou...
2024-01-10
vue-router中使用EventBus传值需要注意到的问题
最近负责开发一个视频相关的项目，要用到vue-router，同时涉及到一些共有状态管理，但是少量的状态又不想用vuex，于是用到了EventBus，一般来说， 我们用EventBus的步骤如下：首先新建一个js用来创建我们的EventBus，如Bus.js123import Vue from 'vue'; ...export default new Vue();接着，我们在需要的地方...
2024-01-10
解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10vue 运用mock数据的示例代码
本文介绍了vue 运用mock数据的示例代码，分享给大家，具体如下：初始化你的项目话不用啰嗦，首先初始化你的项目，最简单的就是使用vue-cli啦vue init webpack引入mock.js安装 mockjsnpm install --save-dev mockjs引入到Vue原型上，方便使用 import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock以上引...
2024-01-10
vue中mousewheel滚动
效果点击上下可以中间滚动，鼠标在框内滚动也会滚动。外部jsconst mouseEvent = { wheel(opt){ console.log(opt) if(!opt.target){ console.log('什么都没有，还让我帮忙！'); return ; } let callback = opt.callback || function () {}; let target = ...
2024-01-10
【Web前端问题】Chrome78 拓展程序怎样通过第三方的方式来安装？
版本 78.0.3904.70（正式版本） （64 位）比如这个“迅雷下载安装”的拓展程序，好像是在某个网站上点击后自动就安装了，想知道是通过什么接口来安装的？...
2024-01-10
vue-cropper插件实现图片截取上传组件封装
基于vue-cropper插件实现图片截取上传组件封装的具体代码，供大家参考，具体内容如下需求场景：后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装实现如下html<template> <div> <a-upload name="avatar" list-type="picture-card" clas...
2024-01-10
webstrom设置新建Vue文件、去除右侧边界白线
webstrom设置Vue文件及其模板 Setting --> Editor --> File and Code Templates 点击“+”号设置name为“My Name”,Extension为vue（文件后缀） 模板内容中设置你自己想要设置的内容 apply OK 会弹出一个对话框，选择打开文件的类型选择html格式就好 然后就可以在新...
2024-01-10在vue项目中使用codemirror插件实现代码编辑器功能
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示：1、使用npm安装依赖npm install --save codemirror;2、在页面中放入如下代码<template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea></template><script>import "codemirror/th...
2024-01-10
vue使用qrcode插件生成二维码
参考：https://www.jianshu.com/p/d3883e020d99步骤：第一步：vue-cli下载插件cnpm install --save qrcodejs2第二步：组件中引入插件<template> <div> <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode --> </div></template> <script>import QRCode from \'qrcodejs2\' // 引入qrcodeexport d...
2024-01-10
webstorm安装vue插件及安装过程出现的问题
想要编辑器识别vue文件需要安装vue插件1. 安装方法： File--> setting --> plugin ，点击plugin，在内容部分的左侧输入框输入vue，会出现1个关于vue的插件，点击安装即可。安装完成后，就可以看到，新建文件时，会有vue文件的提示。 如下图所示：2:vue 使用的是es6语法， 所以要将javascript的版本改...
2024-01-10
【Docker】安装helm失败
问题描述刚学习K8S. 在 (vagrant 虚拟机) k8s集群环境上安装helm。通过helm version,一直提示如下：Client: &version.Version{SemVer:"v2.14.1", GitCommit:"5270352a09c7e8b6e8c9593002a73535276507c0", GitTreeState:"clean"}Error: forwarding ports: error upgrading connection: unable to upgrade co...
2024-01-10
React:快速上手(5)——掌握Redux(2)
本文部分内容参考阮一峰的Redux教程。React-Redux原理React-Redux运行机制 我觉得这张图清楚地描述React-Redux的运行机制： React-Redux将组件划分为两类，第一类是UI组件：只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）提供不使用任...
2024-01-10
你不知道的React 和 Vue 的20个区别【源码层面】
前言面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文从20个层面来对比Vue和React的源码区别； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧文章源码：请戳，原创码字不易，欢迎star！1.Vue和React源码区别1.1 Vue源码来张Vue源码编译过程图图...
2024-01-10
React和Vue区别
1.监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强...
2024-01-10Vue.directive使用注意(小结)
指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 ◦name：指令名，不包括 v- 前缀。◦value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。◦oldValue：指令...
2024-01-10React和Vue中监听变量变化的方法
React 中本地调试React代码的方法yarn build场景假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedSta...
2024-01-10
不吹不黑丨用Vue和React构建相同应用程序，区别在哪？
作者 | Sunil Sandhu译者 | 无明在工作中使用了 Vue 之后，我已经对它有了相当深入的了解。同时，我也对 React 感到好奇。我阅读了 React 的文档，也看了一些教程视频，虽然它们很棒，但我真正想知道的是 React 与 Vue 有哪些区别。这里所说的区别，并不是指它们是否都具有虚拟 DOM 或者它们如何渲染页面...
2024-01-10
Vue实现active点击切换
循环的情况：1、点击时传入index索引（获取当前点击的是哪个）@click="active(index)"2、将索引值传入class（索引等于几就第几个添加active类）:class="{active:index==ins}"3、在data里边添加ins：0（表示默认第一个添加active类）data{ ins：0 } 4、最后在methods里边添加方法ctive (num) { this.ins=num ...
2024-01-10
React、Vue浅析
关注前端的同学都了解，React和Vue是目前应用很广泛的两个前端框架。React是由Facebook开发的，Vue起初则是由google一名程序员尤雨溪开发的。截止到目前github上显示，React的Star数为87422，Vue的为78523，数据差距越来越小。两个框架国内外使用概况如图1所示： 图1 国外前端框架使用概况 ...
2024-01-10
在项目vue中使用echarts的操作步骤
1.在组件中创建该模块<template> <div id = "testChart"></div></template>2.导入echarts前提是：已经在项目中配置过echarts在<script></script>中导入echarts<script>import {echartInit} from "../../../utils/echartUtils"</script>3.初始化该模块 export default { name: 'Test', //vue该组件名称Test.vue moun...
2024-01-10
在vue中使用echars实现上浮与下钻效果
第一步：在vue项目中安装echarsnpm i echars -S第二步:main.js配置 这里是全局引入//引入echarsimport echarts from 'echarts'Vue.prototype.$echarts = echarts第三步直接上代码<template> <div id="container"> <header>浙江省echars地图</header> <div id="echarsMap"></div> </div></template><script>//引入jso...
2024-01-10
